<template>
  <div class="app-container">
    <el-form
      :model="queryParamsFile"
      ref="queryFormFile"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="文件题名" prop="docTitle">
        <el-input
          v-model="queryParamsFile.docTitle"
          placeholder="请输入文件题名"
          clearable
          size="small"
          @keyup.enter.native="handleQueryFile"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryFile">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryFile">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAddFile"
          v-hasPermi="['system:file:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdateFile"
          v-hasPermi="['system:file:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDeleteFile"
          v-hasPermi="['system:file:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExportFile"
          v-hasPermi="['system:file:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getListFile"></right-toolbar>
    </el-row>

    <el-table :data="fileList" @selection-change="handleSelectionChangeFile">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键ID" align="center" prop="fileId" />
      <el-table-column label="顺序号" align="center" prop="sequenceNum" />
      <el-table-column label="文件编号" align="center" prop="fileNo" />
      <el-table-column label="文件题名" align="center" prop="docTitle" />
      <el-table-column label="页数" align="center" prop="pageCounts" />
      <el-table-column label="页号" align="center" prop="pageNo" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="文件存储路径" align="center" prop="filePath" />
      <el-table-column label="图片存储路径" align="center" prop="imgPath" />
      <el-table-column label="文件后缀名" align="center" prop="fileExt" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateFile(scope.row)"
            v-hasPermi="['system:file:edit']"
          >修改</el-button>
          <el-dropdown
            size="mini"
            @command="(command) => handleCommandFile(command, scope.row)"
            v-hasPermi="['system:file:remove', 'system:user:edit']"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="handleDeleteFile"
                icon="el-icon-delete"
                v-hasPermi="['system:file:remove']"
              >删除</el-dropdown-item>
              <el-dropdown-item
                command="handleAuthRole"
                icon="el-icon-circle-check"
                v-hasPermi="['system:user:edit']"
              >分配角色</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="totalFile>0"
      :total="totalFile"
      :page.sync="queryParamsFile.pageNum"
      :limit.sync="queryParamsFile.pageSize"
      @pagination="getListFile"
    />

    <!-- 添加或修改文件管理对话框 -->
    <el-dialog :titleFile="titleFile" :visible.sync="openFile" width="500px" append-to-body>
      <el-form ref="formFile" :model="formFile" :rules="rulesFile" label-width="80px">
        <el-form-item label="案卷ID" prop="archivesId">
          <el-input v-model="formFile.archivesId" placeholder="请输入案卷ID(外键)" />
        </el-form-item>
        <el-form-item label="顺序号" prop="sequenceNum">
          <el-input v-model="formFile.sequenceNum" placeholder="请输入顺序号" />
        </el-form-item>
        <el-form-item label="文件编号" prop="fileNo">
          <el-input v-model="formFile.fileNo" placeholder="请输入文件编号" />
        </el-form-item>
        <el-form-item label="文件题名" prop="docTitle">
          <el-input v-model="formFile.docTitle" placeholder="请输入文件题名" />
        </el-form-item>
        <el-form-item label="页数" prop="pageCounts">
          <el-input v-model="formFile.pageCounts" placeholder="请输入页数" />
        </el-form-item>
        <el-form-item label="页号" prop="pageNo">
          <el-input v-model="formFile.pageNo" placeholder="请输入页号" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formFile.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="文件存储路径" prop="filePath">
          <el-input v-model="formFile.filePath" placeholder="请输入文件存储路径" />
        </el-form-item>
        <el-form-item label="图片存储路径" prop="imgPath">
          <el-input v-model="formFile.imgPath" placeholder="请输入图片存储路径" />
        </el-form-item>
        <el-form-item label="文件后缀名" prop="fileExt">
          <el-input v-model="formFile.fileExt" placeholder="请输入文件后缀名" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormFile">确 定</el-button>
        <el-button @click="cancelFile">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listFile,
  getFile,
  delFile,
  addFile,
  updateFile
} from "@/api/system/file";

export default {
  name: "File",
  data() {
    return {
      // 选中数组
      fileIds: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      totalFile: 0,
      // 文件管理表格数据
      fileList: [],
      // 弹出层标题
      titleFile: "",
      // 是否显示弹出层
      openFile: false,
      // 预留字段10时间范围
      daterangeCreateTime: [],
      // 预留字段10时间范围
      daterangeUpdateTime: [],
      // 查询参数
      queryParamsFile: {
        pageNum: 1,
        pageSize: 10,
        sequenceNum: null,
        fileNo: null,
        docTitle: null,
        pageCounts: null,
        pageNo: null,
        archivesId: null,
        filePath: null,
        imgPath: null,
        fileExt: null
      },
      // 表单参数
      formFile: {},
      // 表单校验
      rulesFile: {}
    };
  },
  created() {
    this.getListFile();
  },
  methods: {
    /** 查询文件管理列表 */
    getListFile() {
      console.log(this.queryParamsFile)
      this.queryParamsFile.params = {};
      if (null != this.daterangeCreateTime && "" != this.daterangeCreateTime) {
        this.queryParamsFile.params[
          "beginCreateTime"
        ] = this.daterangeCreateTime[0];
        this.queryParamsFile.params[
          "endCreateTime"
        ] = this.daterangeCreateTime[1];
      }
      if (null != this.daterangeUpdateTime && "" != this.daterangeUpdateTime) {
        this.queryParamsFile.params[
          "beginUpdateTime"
        ] = this.daterangeUpdateTime[0];
        this.queryParamsFile.params[
          "endUpdateTime"
        ] = this.daterangeUpdateTime[1];
      }
      listFile(this.queryParamsFile).then(response => {
        console.log(response)
        this.fileList = response.rows;
        this.totalFile = response.total;
      });
    },
    // 取消按钮
    cancelFile() {
      this.openFile = false;
      this.resetFile();
    },
    // 表单重置
    resetFile() {
      this.formFile = {
        fileId: null,
        sequenceNum: null,
        fileNo: null,
        docTitle: null,
        pageCounts: null,
        pageNo: null,
        remark: null,
        archivesId: null,
        filePath: null,
        imgPath: null,
        fileExt: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null
      };
      this.resetForm("formFile");
    },
    /** 搜索按钮操作 */
    handleQueryFile() {
      this.queryParamsFile.pageNum = 1;
      this.getListFile();
    },
    /** 重置按钮操作 */
    resetQueryFile() {
      this.daterangeCreateTime = [];
      this.daterangeUpdateTime = [];
      this.resetForm("queryFormFile");
      this.handleQueryFile();
    },
    // 多选框选中数据
    handleSelectionChangeFile(selection) {
      this.fileIds = selection.map(item => item.fileId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAddFile() {
      this.resetFile();
      this.openFile = true;
      this.titleFile = "添加文件管理";
    },
    /** 修改按钮操作 */
    handleUpdateFile(row) {
      this.resetFile();
      const fileId = row.fileId || this.fileIds;
      getFile(fileId).then(response => {
        this.formFile = response.data;
        this.openFile = true;
        this.titleFile = "修改文件管理";
      });
    },
    /** 提交按钮 */
    submitFormFile() {
      this.$refs["formFile"].validate(valid => {
        if (valid) {
          if (this.formFile.fileId != null) {
            updateFile(this.formFile).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openFile = false;
              this.getListFile();
            });
          } else {
            addFile(this.formFile).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openFile = false;
              this.getListFile();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDeleteFile(row) {
      const fileIds = row.fileId || this.fileIds;
      this.$modal
        .confirm('是否确认删除文件管理编号为"' + fileIds + '"的数据项？')
        .then(function() {
          return delFile(fileIds);
        })
        .then(() => {
          this.getListFile();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExportFile() {
      this.download(
        "system/file/export",
        {
          ...this.queryParamsFile
        },
        `file_${new Date().getTime()}.xlsx`
      );
    },
    // 更多操作触发
    handleCommandFile(command, row) {
      switch (command) {
        case "handleDeleteFile":
          this.handleDeleteFile(row);
          break;
        case "handleAuthRole":
          this.handleAuthRole(row);
          break;
        default:
          break;
      }
    }
  }
};
</script>
